<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合示例</title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>
<script type="text/javascript" src="../js/theme.js"></script>
<script type="text/javascript" src="../grid/gridData.js"></script>
</head>
<body>

<div id="tab"></div>

<div id="tab1-cont">
	<table>
		<tr><td>班级：</td><td>高三5班</td></tr>
		<tr><td>人数：</td><td>40</td></tr>
		<tr><td>班主任：</td><td>刘XX</td></tr>
		<tr><td>班长：</td><td>赵XX</td></tr>
		<tr><td>学习委员：</td><td>王XX</td></tr>
	</table>
</div>
<div id="tab2-cont">
	<table>
		<tr>
			<td>学号:</td><td id="schStuNo"><input type="text" name="schStuNo" value=""/></td>
			<td>姓名:</td><td id="schName"><input type="text" name="schName" value=""/></td>
			<td>性别:</td><td id="schGender"><input type="text" name="schGender" value=""/></td>
			<td>
				<input type="radio" name="radio" value="1" checked="checked"/> 男
  				<input type="radio" name="radio" value="2"/> 女
			</td>
			<td>
				<button>搜索</button>
				<button id="addBtn">添加</button>
			</td>
		</tr>
	</table>
	<hr>
	<div id="grid"></div><br>
</div>


<div id="win" style="display: none;">
	<form id="form">
		<input type="hidden" name="id">
		<table>
			<tr><td>学号:</td><td id="stuNo"><input type="text" name="stuNo" value=""/></td></tr>
			<tr><td>姓名:</td><td id="name"><input type="text" name="name" value=""/></td></tr>
			<tr><td>性别:</td><td id="gender"><input type="radio" name="gender" value="1" checked="checked"/> 男
	  				<input type="radio" name="gender" value="2"/> 女</td></tr>
			<tr><td>民族:</td><td id="nationality"><input type="text" name="nationality" value=""/></td></tr>
			<tr><td>政治面貌:</td><td id="politicsStatus">
				<select name="politicsStatus">
					<option>-请选择-</option>
					<option value="0">群众</option>
					<option value="1">共青团员</option>
					<option value="2">党员</option>
					<option value="3">预备党员</option>
				</select>
			</td></tr>
			<tr><td>出生日期:</td><td id="birthday"><input id="_birthday" type="text" name="birthday" value=""/></td></tr>
			<tr><td>入学时间:</td><td id="registDate"><input id="_registDate" type="text" name="registDate" value=""/></td></tr>
			<tr><td>手机号:</td><td id="mobile"><input type="text" name="mobile" value=""/></td></tr>
			<tr><td>地址:</td><td id="address"><textarea name="address"></textarea></td></tr>
		</table>
	</form>
</div>

<script type="text/javascript">
//本地数据
var localData = [];
for(var i=1; i<=50; i++) {
	localData.push({
        "id": i, 
        "stuNo" : "NO00000" + i,
        "name" : "张三" + i, 
        "gender": 1, 
        "mobile": "133xxxx1567", 
        "address": "浙江杭州", 
        "birthday": "2010-02-16", 
        "department": 16, 
        "nationality": "汉族", 
        "politicsStatus": i%3, 
        "registDate": "2010-02-16"
    });
}

var POLITICS_STATUS_ITEMS = [
	{value:0,text:"群众"}
	,{value:1,text:"共青团员"}
	,{value:2,text:"党员"}
	,{value:3,text:"预备党员"}
];

VUI
.dir('../../src/') // 设置JS存放根目录
.use(['Grid','Tab','Dialog','Msg','Form','DatePick'],function(){
	var form,grid,win,tab;
	
	tab = new VUI.Tab({
		renderId:'tab'
		,items:[
			{title:'班级信息',contentId:'tab1-cont'}
			,{title:'学生管理',contentId:'tab2-cont',selected:true}
		]
	});
	
	grid = new VUI.Grid({
		renderId:'grid'
		,data : localData
		,striped:true // 斑马线
		,pagination :true
		,rownumbers :true
		,columns : [ [
			{field : 'stuNo',title : '学号'}
			,{field : 'name',title : '姓名'}
			,{field : 'gender',title : '性别',formatter:function(val){
				return val == 1 ? '男' : '女'
			}}
			,{field : 'mobile',title : '手机号'}
			,{field : 'address',title : '地址'}
			,{field : 'birthday',title : '生日'}
			,{field : 'nationality',title : '民族'}
			,{field : 'politicsStatus',title : '政治面貌',formatter:function(val,obj,index,$td){
				return POLITICS_STATUS_ITEMS[val].text;
			}}
			,{field : 'registDate',title : '注册时间'}
			,{
				title : '操作'
				,formatter:function(val,obj,index,$td,$tr){
					var html = [
						'<a href="#" class="btn-update">修改</a>'
						,'<a href="#" class="btn-del">删除</a>'
					];
					return html.join(' | ');
				}
			}
			] 
		]
	});
	
	grid.on('ClickCell',function(e){
		var $target = $(e.target); // $target即<a>
		if($target.hasClass('btn-del')) {
			VUI.Msg.confirm('确认','确定要删除'+e.row.name+'吗?',function(r){
				if(r) {
					VUI.Msg.alert('删除成功');
				}
			});
		}
		if($target.hasClass('btn-update')) {
			form.load(e.row);
			win.show();
		}
	});
	
	
	form = new VUI.Form({
		formId:'form'
	});
	
	win = new VUI.Dialog({
		contentId:'win'
		,title:'编辑'
		,width:400
		,modal:false
		,onOk:function() {
			var data = form.getData();
			alert(JSON.stringify(data))
		}
	});
	
	new VUI.DatePick({targetId:'_birthday'});
	new VUI.DatePick({targetId:'_registDate'});
	
	$('#addBtn').click(function(){
		form.clear();
		win.show();
	});
	
});



</script>
</body>
</html>